<script setup lang="ts" name="404">
import userinfo from "@/store/userinfo";

const { t } = useI18n();
const piniaUserinfo: any = userinfo();
const router = useRouter();
const global: any = getCurrentInstance()?.appContext.config.globalProperties;

const images = reactive({
  leftIcon: new URL(
    "@/assets/images/Me/leftIcon.png",
    import.meta.url
  ).href,
  rightIcon: new URL(
    "@/assets/images/Me/rightIcon.png",
    import.meta.url
  ).href,
  avatar: new URL(
    "@/assets/images/Me/avatar.png",
    import.meta.url
  ).href,
});

const data = reactive({
  isLoading: false,
});

const { isLoading } = toRefs(data);

const goNextPage = (params: string) => {
  if (params == "account") {
    router.push(`/me/${params}?type=1`);
  } else {
    router.push(`/me/${params}`);
  }
};

const goThreePage = (params: string) => {

};
const handleLogOut = () => {
  piniaUserinfo.logout();
  router.push({ path: "/login" });
};
const refreshMoney = () => {
  isLoading.value = true;
  piniaUserinfo.queryUserMoney().then(() => {
    global.message(t("my.test8"));
    isLoading.value = false;
  }).finally(() => {
    isLoading.value = false;
  });
};
onMounted(() => {
  piniaUserinfo.queryUserMoney();
});

const handleGoOpt = (params: string) => {
  router.push(`/me/${params}`);
}
</script>

<template>
  <div class="MePage">
    <div class="topHeader">
      <DetailHeader :title="t('home.btn4')" bg="transparent" />
      <div class="headerWrap">
        <van-image
          width="54rem"
          height="54rem"
          fit="cover"
          round
          :src="images.avatar"
        />
        <div class="accountInfo">
          <div>
            {{ t("my.test1") }}：
            <p>{{ piniaUserinfo?.getUserinfo?.user?.phone || piniaUserinfo?.getUserinfo?.user?.mail }}</p>
          </div>
          <div class="balance">
            {{ t("my.test2") }}：
            <p>₹ {{ piniaUserinfo.getUserMoney }}</p>
            <Iconfont
              :class="{
                rotate: !!isLoading
              }"
              name="icon-icon_shuaxin"
              color="#FF2D55"
              size="20"
              @click="refreshMoney"
            />
          </div>
        </div>
      </div>
      <div class="tabOpt">
        <div class="tabItem left" @click="handleGoOpt('recharge')">
          <img :src="images.leftIcon" alt="" />
          <div>
            <span>{{ t('my.test4') }}</span>
            <Iconfont name="icon-icon_jiantou2" color="#FF2D55" size="20" />
          </div>
        </div>
        <div class="tabItem right" @click="handleGoOpt('withdraw')">
          <img :src="images.rightIcon" alt="" />
          <div>
            <span>{{ t('my.test5') }}</span>
            <Iconfont name="icon-icon_jiantou2" color="#FF7A00" size="20" />
          </div>
        </div>
      </div>
    </div>
    <div class="blackBg"></div>
    <div class="accountData">
      <div class="accountItem" @click="goNextPage('account')">
        <div class="leftAccount">
          <Iconfont name="icon-icon_caipiao" color="#FF2D55" size="24" />
          <div>{{ t("my.test3") }}</div>
        </div>
        <div class="rightData">
          <span>{{ t('my.test11') }}</span>
          <Iconfont style="margin-left: 8rem;" name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
        </div>
      </div>
      <div class="accountItem" @click="goNextPage('Transactions')">
        <div class="leftAccount">
          <Iconfont name="icon-icon_jiaoyi" color="#FF2D55" size="24" />
          <div>{{ t("my.test6") }}</div>
        </div>
        <div class="rightData">
          <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
        </div>
      </div>
      <div class="accountItem" @click="goNextPage('changePassword')">
        <div class="leftAccount">
          <Iconfont name="icon-icon_mima" color="#FF2D55" size="24" />
          <div>{{ t("my.test7") }}</div>
        </div>
        <div class="rightData">
          <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
        </div>
      </div>
      <div class="accountItem" @click="goThreePage('online')">
        <div class="leftAccount">
          <Iconfont name="icon-icon_zaixian1" color="#FF2D55" size="24" />
          <div>{{ t("my.test9") }}</div>
        </div>
        <div class="rightData">
          <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
        </div>
      </div>
      <!-- <div class="accountItem" @click="goNextPage('profile')">
        <div class="leftAccount">
          <Iconfont name="icon-icon_zhanghu_press" color="#FF2D55" size="24" />
          <div>{{ t("my.test10") }}</div>
        </div>
        <div class="rightData">
          <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
        </div>
      </div> -->
      <!-- <div class="accountItem">
          <div class="leftAccount">
            <Iconfont name="icon-icon_pengyou" color="#FF2D55" size="24" />
            <div>邀请朋友</div>
          </div>
          <div class="rightData">
            <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
          </div>
        </div> -->
      <!-- <div class="accountItem">
          <div class="leftAccount">
            <Iconfont name="icon-icon_zaixian1" color="#FF2D55" size="24" />
            <div>在线服务</div>
          </div>
          <div class="rightData">
            <Iconfont name="icon-icon_jiantou2" color="#A8AEB9" size="20" />
          </div>
        </div> -->
    </div>
    <div class="logout" @click="handleLogOut">{{ t("my.btn1") }}</div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
